
$(function(){
    var currentPage=1;
    var pageSize=3;
    var picArr=[];
    render();
    function render(){
        $.ajax({
            url:'/product/queryProductDetailList',
            type:'get',
            data:{
                page:currentPage,
                pageSize:pageSize
            },
            dataType:'json',
            success:function(info){
                console.log(info);
                $('#product tbody').html(template('tmp',info));

                // 配置分页插件
                $("#pagintor").bootstrapPaginator({
                    bootstrapMajorVersion:3,//默认是2，如果是bootstrap3版本，这个参数必填
                    currentPage:info.page,//当前页
                    totalPages:Math.ceil(info.total/info.size),//总页数
                    size:"small",//设置控件的大小，mini, small, normal,large
                    onPageClicked:function(a, b,c,page){
                      //为按钮绑定点击事件 page:当前点击的按钮值
                    //   设置当前页面为点击之后的页面
                        currentPage=page;
                    //重新渲染分页
                        render();
                    }
                  });
            }   
        })
    }
    // 点击按钮显示模态框
    $('.btn-add').on('click',function(){
        $('#add').modal('show');
    })

    // 请求下拉框的数据
    $.ajax({
        url:"/category/querySecondCategoryPaging",
        data:{
            page:1,
            pageSize:100
        },
        dataType:'json',
        success:function(info){
            console.log(info);
            $('.dropdown-menu').html(template('tmp-select',info))
        }
    })

    // 事件委托注册下拉框里的点击事件
    $('.dropdown').on('click','a',function(){
        // 改变下拉框的值
        $('.dropdown .cate-text').text($(this).text());
        // 获取上传的id值为下一步的表单上传做准备
        $('.brandId').val($(this).data('id'));
        // 将校验结果改为校验成功
         $('#form').data('bootstrapValidator').updateStatus('brandId','VALID');
    })

    //   上传商品图片
      $("#file").fileupload({
        dataType:"json",
        //e：事件对象
        //data：图片上传后的对象，通过data.result.picAddr可以获取上传后的图片地址
        done:function (e, data) {
        //   console.log(data);
        var url = data.result.picAddr; //获取图片地址
        // 获取服务器上传的图片地址,数组前面添加
        picArr.unshift(data.result);
        // 渲染图片
        $('.img-list').prepend('<img src="'+url+'" alt="" width="80"></img>')
        // 判断图片是否大于3张
        if(picArr.length>3){
            picArr.pop();
           $('.img-list img:last-of-type').remove();
        }
        console.log(picArr);
        if(picArr.length==3){
             //将校验结果改为校验成功
             $("#form").data('bootstrapValidator').updateStatus('brandLogo', 'VALID');
        }
        }
  });
    
//   表单数据校验
    $("#form").bootstrapValidator({
         // 将默认的排除项, 重置掉 (默认会对 :hidden, :disabled等进行排除)
    excluded: [],

    // 配置图标
    feedbackIcons: {
      valid: 'glyphicon glyphicon-ok',
      invalid: 'glyphicon glyphicon-remove',
      validating: 'glyphicon glyphicon-refresh'
    },
        fields:{
            brandId:{
                validators:{
                    notEmpty:{
                        message:"请选择二级分类"
                    }
                }
            },
            proName:{
                validators:{
                    notEmpty:{
                        message:"商品名称不能为空"
                    }
                }
            },
            proDesc:{
                validators:{
                    notEmpty:{
                        message:"商品描述不能为空"
                    }
                }
            },
            num:{
                validators:{
                    notEmpty:{
                        message:"商品库存不能为空"
                    },
                    regexp: {
                        regexp: /^[1-9]\d*$/,
                        message: '库存必须是非0开头的数字'
                    }
                }
            },
            size:{
                validators:{
                    notEmpty:{
                        message:"商品尺码不能为空"
                    },
                    regexp: {
                        regexp: /^\d{2}-\d{2}$/,
                        message: '尺码的格式必须是xx-xx格式 x是数字'
                    }
                }
            },
            oldPrice:{
                validators:{
                    notEmpty:{
                        message:"商品原价不能为空"
                    }
                }
            },
            price:{
                validators:{
                    notEmpty:{
                        message:"商品现价不能为空"
                    }
                }
            },
            brandLogo:{
                validators:{
                    notEmpty:{
                        message:"请选择三张图片"
                    }
                }
            }
        }
    })

    $('#form').on('success.form.bv',function(e){
        e.preventDefault();
        var params = $('#form').serialize();
        params += "&picArr=" + JSON.stringify( picArr );
        $.ajax({
            url:"/product/addProduct",
            type:'post',
            data:params,
            dataType:'json',
            success:function(info){
                // console.log(info)
                if(info.success){
                    $('#add').modal('hide');
                    currentPage=1;
                    render();
                    $("#form").data('bootstrapValidator').resetForm(true);
                    $('#cate-list').text('请选择二级分类');
                    // 清空数组
                    picArr=[];
                    // 清空图片
                    $('img-list img').remove();
                }
            }
        })
    })
})